<template>
  <div class="dashboard-container">
    <!-- 数据统计 -->
    <el-row :gutter="10" class="mt-2">
      <!-- 访客数(UV) -->
      <el-col :span="6">
        <UVCard />
      </el-col>
      <!-- 浏览量(PV) -->
      <el-col :span="6">
        <PVCard />
      </el-col>

      <!-- 照片轮播图 -->
      <el-col :span="12">
        <OtherCarousel />
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt-2">
      <!-- 趋势统计图 -->
      <el-col :xs="24" :span="16">
        <el-carousel ref="carouselRef" direction="horizontal" :autoplay="true" trigger="hover" height="490px"
          :motion-blur="true" indicator-position="none" :interval="5000">
          <el-carousel-item>
            <visitTrendEchartsCard />
          </el-carousel-item>
          <el-carousel-item>
            <EmissionStatsEchartsCard />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <!-- 通知公告 -->
      <el-col :xs="24" :span="8">
        <NoticeListCard />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
//访客趋势Echarts图
import visitTrendEchartsCard from "./components/visitTrendEchartsCard.vue";
//通知卡片
import NoticeListCard from './components/NoticeListCard.vue'
//碳减排量卡片
import EmissionStatsEchartsCard from './components/EmissionStatsEchartsCard.vue'

//访客数、浏览量
import UVCard from './components/UVCard.vue'
import PVCard from './components/PVCard.vue'

//通知轮播图
import OtherCarousel from './components/OtherCarousel.vue'

</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 0 15px;
}
</style>
